<template>
  <div class="workflow-template-manager">
    <el-form ref="formRef" :model="template" label-width="120px">
      <!-- 基本信息 -->
      <el-card class="mb-4">
        <template #header>
          <div class="card-header">
            <span>基本信息</span>
          </div>
        </template>

        <el-form-item label="名称" prop="name">
          <el-input v-model="template.name" placeholder="请输入工作流名称" />
        </el-form-item>

        <el-form-item label="标题" prop="title">
          <el-input v-model="template.title" placeholder="请输入工作流标题" />
        </el-form-item>

        <el-form-item label="描述" prop="description">
          <el-input
            v-model="template.description"
            type="textarea"
            placeholder="请输入工作流描述"
          />
        </el-form-item>

        <el-form-item label="类型" prop="type">
          <el-select v-model="template.type" placeholder="请选择工作流类型">
            <el-option label="图像处理" value="image" />
            <el-option label="文本处理" value="text" />
          </el-select>
        </el-form-item>
      </el-card>

      <!-- 参数配置 -->
      <el-card class="mb-4">
        <template #header>
          <div class="card-header">
            <span>参数配置</span>
            <el-button type="primary" @click="addParam">添加参数</el-button>
          </div>
        </template>

        <template v-for="(param, index) in template.params" :key="param.id">
          <div class="param-item">
            <el-form-item :label="'参数 ' + (index + 1)" required>
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-input v-model="param.id" placeholder="参数ID" />
                </el-col>
                <el-col :span="6">
                  <el-select v-model="param.type" placeholder="参数类型">
                    <el-option label="文本" value="text" />
                    <el-option label="数字" value="number" />
                    <el-option label="选择" value="select" />
                    <el-option label="图片" value="image" />
                    <el-option label="开关" value="switch" />
                    <el-option label="滑块" value="slider" />
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <el-input v-model="param.label" placeholder="参数标签" />
                </el-col>
                <el-col :span="4">
                  <el-button type="danger" @click="removeParam(index)">
                    删除
                  </el-button>
                </el-col>
              </el-row>

              <!-- 参数类型特有配置 -->
              <el-row v-if="param.type === 'number' || param.type === 'slider'" class="mt-2">
                <el-col :span="6">
                  <el-input-number v-model="param.min" placeholder="最小值" />
                </el-col>
                <el-col :span="6">
                  <el-input-number v-model="param.max" placeholder="最大值" />
                </el-col>
                <el-col :span="6">
                  <el-input-number v-model="param.step" placeholder="步长" />
                </el-col>
              </el-row>

              <el-row v-if="param.type === 'select'" class="mt-2">
                <el-col :span="24">
                  <el-button @click="addOption(param)">添加选项</el-button>
                  <div v-for="(option, optIndex) in param.options" :key="optIndex" class="mt-2">
                    <el-input v-model="option.label" placeholder="选项标签" style="width: 200px" />
                    <el-input v-model="option.value" placeholder="选项值" style="width: 200px" class="ml-2" />
                    <el-button type="danger" @click="removeOption(param, optIndex)" class="ml-2">
                      删除选项
                    </el-button>
                  </div>
                </el-col>
              </el-row>
            </el-form-item>
          </div>
        </template>
      </el-card>

      <!-- 布局配置 -->
      <el-card>
        <template #header>
          <div class="card-header">
            <span>布局配置</span>
            <el-button type="primary" @click="addGroup">添加分组</el-button>
          </div>
        </template>

        <template v-for="(group, index) in template.layout.groups" :key="group.id">
          <div class="group-item">
            <el-form-item :label="'分组 ' + (index + 1)" required>
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-input v-model="group.id" placeholder="分组ID" />
                </el-col>
                <el-col :span="6">
                  <el-input v-model="group.title" placeholder="分组标题" />
                </el-col>
                <el-col :span="8">
                  <el-select
                    v-model="group.params"
                    multiple
                    placeholder="选择参数"
                  >
                    <el-option
                      v-for="param in template.params"
                      :key="param.id"
                      :label="param.label"
                      :value="param.id"
                    />
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-button type="danger" @click="removeGroup(index)">
                    删除
                  </el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </div>
        </template>
      </el-card>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { v4 as uuidv4 } from 'uuid'
import type { WorkflowTemplate, WorkflowParam, ParamGroup } from '@/types/workflow'

const props = defineProps<{
  modelValue: WorkflowTemplate
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: WorkflowTemplate): void
  (e: 'change', value: WorkflowTemplate): void
}>()

// 模板数据
const template = reactive<WorkflowTemplate>(props.modelValue)

// 添加参数
const addParam = () => {
  template.params.push({
    id: `param_${uuidv4()}`,
    type: 'text',
    label: '',
    description: '',
    required: false,
    visible: true
  })
}

// 删除参数
const removeParam = (index: number) => {
  template.params.splice(index, 1)
}

// 添加选项
const addOption = (param: WorkflowParam) => {
  if (!param.options) {
    param.options = []
  }
  param.options.push({
    label: '',
    value: ''
  })
}

// 删除选项
const removeOption = (param: WorkflowParam, index: number) => {
  param.options?.splice(index, 1)
}

// 添加分组
const addGroup = () => {
  template.layout.groups.push({
    id: `group_${uuidv4()}`,
    title: '',
    params: [],
    visible: true
  })
}

// 删除分组
const removeGroup = (index: number) => {
  template.layout.groups.splice(index, 1)
}
</script>

<style scoped lang="scss">
.workflow-template-manager {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .param-item,
  .group-item {
    margin-bottom: 24px;
    padding: 16px;
    border: 1px solid #eee;
    border-radius: 4px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  :deep(.el-form-item__content) {
    flex-wrap: wrap;
  }
}
</style>